import Breadcrumb from '@/components/common/breadcrumb'
import CardList from '@/components/layout/card-list'
import Floor from '@/components/layout/floor'
import Wrapper from '@/components/layout/wrapper'
import ArticleCard from '@/components/news/article-card'
import { getHomeUrl } from '@/utils/build-url'
import { getArticleUrl } from '@/utils/build-url/news'
import { getArticleList, getArticleRecommendList, getAuthorList, getCategoryList, getVideoList } from './action'
import Heading from '@/components/common/heading'
import Block from '@/components/layout/block'
import { Slider, SliderBar, SliderMain } from '@/components/common/slider'
import { List, ListContent } from '@/components/layout/list'
import ArticleRecommendItem from '@/components/news/article-recommend-item'
import ArticleImgCard from '@/components/news/article-img-card'
import AuthorCard from '@/components/news/author-card'
import VideoCard from '@/components/news/video-card'
import VideoImgCard from '@/components/news/video-img-card'
import NewsCategoryCard from '@/components/news/news-category-card'


const page = async () => {
  const articleList = await getArticleList()
  const articleRecommendList = await getArticleRecommendList()
  const authorList = await getAuthorList()
  const videoList = await getVideoList()
  const categoryList = await getCategoryList()
  return (
    <>
      {/* 面包屑 */}
      <Floor>
        <Wrapper>
          <Block>
            <Breadcrumb list={[
              { name: '首页', href: getHomeUrl({ language: 'zh' }) },
              { name: '新闻', href: getArticleUrl({ language: 'zh' }) }
            ]} />
          </Block>
        </Wrapper>
      </Floor>

      {/* 热门视频分类 */}
      <Floor>
        <Wrapper>
          <Block>
            <Heading moreUrl='/'>
              热门分类
            </Heading>
            <CardList className='grid-cols-[repeat(auto-fill,minmax(220px,1fr))]! md:grid-cols-[repeat(auto-fill,minmax(300px,1fr))]!'>
              {categoryList.map((item) => (
                <NewsCategoryCard key={item.id} obj={item} />
              ))}
            </CardList>
          </Block>
        </Wrapper>
      </Floor>

      {/* 热门作者 */}
      <Floor>
        <Wrapper>
          <Block>
            <Heading moreUrl='/'>
              热门作者
            </Heading>
            <CardList className='grid-cols-[repeat(auto-fill,minmax(160px,1fr))]! md:grid-cols-[repeat(auto-fill,minmax(180px,1fr))]!'>
              {authorList.map((item) => (
                <AuthorCard key={item.id} obj={item} />
              ))}
            </CardList>
          </Block>
        </Wrapper>
      </Floor>
      
      {/* 本日更新 */}
      <Floor>
        <Wrapper>
          <Block>
            <Heading moreUrl='/'>
              本日更新
            </Heading>
            <CardList>
              {articleList.slice(0, 4).map((item) => (
                <ArticleCard key={item.id} obj={item} />
              ))}
            </CardList>
          </Block>
        </Wrapper>
      </Floor>

      <Floor className='bg-white'>
        <Wrapper>
          <Block>
            <Heading moreUrl='/'>
              新闻
            </Heading>
            <CardList>
              {articleList.slice(0, 4).map((item) => (
                <ArticleImgCard key={item.id} obj={item} />
              ))}
            </CardList>
          </Block>
        </Wrapper>
      </Floor>

      <Floor>
        <Wrapper>
          <Slider>
            <SliderMain>
              <Block>
                <Heading moreUrl='/'>
                  新闻
                </Heading>
                <CardList>
                  {articleList.map((item) => (
                    <ArticleCard key={item.id} obj={item} />
                  ))}
                </CardList>
              </Block>
            </SliderMain>
            <SliderBar>
              <Block>
                <Heading moreUrl='/'>
                  新闻
                </Heading>
                <List>
                  {articleRecommendList.map((item, index) => (
                    <ListContent key={item.id}>
                      <ArticleRecommendItem index={index} obj={item} />
                    </ListContent>  
                  ))}
                </List>
              </Block>
            </SliderBar>
          </Slider>
        </Wrapper>
      </Floor>

      {/* 视频 */}
      <Floor>
        <Wrapper>
          <Block>
            <Heading moreUrl='/'>
              视频
            </Heading>
            <CardList>
              {videoList.slice(0, 4).map((item) => (
                <VideoCard key={item.id} obj={item} />
              ))}
            </CardList>
          </Block>
        </Wrapper>
      </Floor>

      <Floor className='bg-white'>
        <Wrapper>
          <Block>
            <Heading moreUrl='/'>
              视频
            </Heading>
            <CardList>
              {videoList.slice(0, 4).map((item) => (
                <VideoImgCard key={item.id} obj={item} />
              ))}
            </CardList>
          </Block>
        </Wrapper>
      </Floor>

      <Floor>
        <Wrapper>
          <Slider>
            <SliderMain>
              <Block>
                <Heading moreUrl='/'>
                  视频
                </Heading>
                <CardList>
                  {videoList.map((item) => (
                    <VideoCard key={item.id} obj={item} />
                  ))}
                </CardList>
              </Block>
            </SliderMain>
            <SliderBar>
              <Block>
                <Heading moreUrl='/'>
                  视频
                </Heading>
                <List>
                  {articleRecommendList.map((item, index) => (
                    <ListContent key={item.id}>
                      <ArticleRecommendItem index={index} obj={item} />
                    </ListContent>  
                  ))}
                </List>
              </Block>
            </SliderBar>
          </Slider>
        </Wrapper>
      </Floor>
    </>
  )
}

export default page